<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      @close="sendVisible"
      :modal-append-to-body="false"
      width="20%"
      class="el_dialog_item"
    >
      <div>
        <el-image class="login_card_img" :src="logo_img" fit="cover"></el-image>
        <p class="login_card_title">登录</p>
        <p class="login_card_desc">欢迎登录街圈文化</p>
      </div>
      <div>
        <el-form ref="ruleForm" :model="form" inline="inline" :rules="rules">
          <el-form-item prop="username">
            <el-input class="login_card_input" placeholder="请输入用户名" v-model="form.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password class="login_card_input" placeholder="请输入密码" v-model="form.password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link :underline="false" @click="forgetDialog=true">忘记密码？</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login_card_button" :loading="loginLoading" @click="login('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <div>
      <Forget_Password
             :forgetDialog.sync="forgetDialog"
             @getForgetDialog="getForgetDialog"
      >
      </Forget_Password>
    </div>
  </div>
</template>

<script>
import Forget_Password from "./Forget_Password.vue";

export default {
  components: {Forget_Password},
  props:['visibleType'],
    data() {
    let validateInput = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入不能为空'))
        }else{
          callback();
        }
      }
      return {
        dialogVisible:false,
        loginLoading:false,
        forgetDialog:false,
        logo_img: require('../assets/img.png'),
        form:{
          username:'',
          password:'',
        },
        rules: {
          username:[
            {validator:validateInput,require: true, message:'请输入管理员账号', trigger:'blue'},
          ],
          password:[
            {validator:validateInput,require: true, message:'请输入管理员密码', trigger:'blue'},
          ]
        },
      }
    },
  watch:{
    visibleType(newValue){
      if (newValue === true){
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    getForgetDialog(val) {
      this.forgetDialog = val
    },
    sendVisible() {
      this.$emit('getVisible','false')
    },
    login(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid){
          this.$axios.get('api/login/',{
            params:{username:this.form.username,password:this.form.password}
          }).then((response)=>{
            const res = response.data
            if (res['respCode'] === '000000'){
              this.$message.success('登录成功')
              this.$router.push('/')
              localStorage.setItem('username',this.form.username)
              localStorage.setItem('loginStatus','success')
            }else {
              this.$message.error(res['respMsg'])
              this.loginLoading = false
              console.log('登录失败')
            }
          })
        }else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped>
.el_dialog_item {
  text-align: center;
}
.el-dialog__wrapper {
  .el-dialog {
    border-radius: 20px;
  }
}
.login_card_img {
  height: 30px;
}
.login_card_title {
  font-size: 25px;
  font-weight: bold;
}
.login_card_desc {
  font-size: 17px;
  color: #cccccc;
}
.login_card_input {
  width: 250px;
}
.login_card_button {
  width: 250px;
}
</style>
